<template>
    <div class="register-con">
        <div class="user-info-item1">
            <div class="user-group">
                <div class="user-item1">
                    <div class="ui-first-item">
                        真实姓名
                    </div>
                    <div class="ui-last-item">
                        <input placeholder="请输入您本人的真实姓名" v-model="real_name"/>
                    </div>
                </div>
                <div class="user-item1">
                    <div class="ui-first-item" >
                        身份证号码
                    </div>
                    <div class="ui-last-item">
                        <input placeholder="请输入您的身份证号码" v-model="id_card" />
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="user-info-item1">
            <div class="user-group">
                <div class="user-item1">
                    <div class="ui-first-item">
                        结算银行卡
                    </div>
                    <div class="ui-last-item">
                        <input placeholder="请输入您的结算银行卡(储蓄卡)" v-model="card_num" @keyup="bank_num_change"/>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="user-info-item1">
            <div class="user-group">
                <div class="user-item1">
                    <div class="ui-first-item">
                        预留手机号
                    </div>
                    <div class="ui-last-item">
                        <input placeholder="结算银行卡预留手机号码" v-model="phone" oninput="this.value=this.value.replace(/[^0-9.]+/,'');"/>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="user-info-item1">
            <div class="user-group">
                <div class="user-item1">
                    <div class="ui-first-item">
                        选择地区
                    </div>
                    <div class="ui-last-item" @click="show_area_container">
                       {{address}}
                    </div>
                    <img src = "../assets/right.png" />
                </div>
                <div class="user-item1">
                    <div class="ui-first-item">
                        详细地址
                    </div>
                    <div class="ui-last-item">
                        <input placeholder="街道门牌信息" v-model="detial_address"/>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <!-- 地址选择开始 -->
        <div class="area-cover" v-if="show_area" @click="on_cancle"></div>
        <div class="area-content animated bounceInUp" v-if="show_area">
            <van-area :area-list="areaList" @confirm="on_confirm" @cancel="on_cancle" />
        </div>
        <!-- 地址选择结束 -->
        <div class="register-btn" @click="goto_index">
            <input type="button" value="注册/登录" />
        </div>
    </div>
</template>
<script>
import areaList from "base/area/area"
import * as regular from '../utils/regular'
export default {
  data() {
    return {
        areaList: areaList,// 地址信息
        show_area:false,// 是否显示地址
        real_name:'', // 真实姓名
        id_card:'', // 身份证号码
        card_num:'',// 结算卡
        phone:'', //手机号
        address:'地区信息',// 地址信息
        detial_address:'',//详细地址信息
        add_arr:''
    };
  },
  created(){
        let that = this;
        that._load();
        //测试cookie
  },
  methods: {
    // 初始加载
     _load(){
        let that = this
        let code = that.getQueryString("code")
    },
    // 进入首页
    goto_index(){
        let that = this
        that.$api.ajax([that.goto_register()])
    },
    bank_num_change(){
        if(/\S{5}/.test(this.card_num)){
            this.card_num = this.card_num.replace(/\s/g, '').replace(/(.{4})/g, "$1 ");
        }
    },
    //注册
    goto_register(){
        let that = this
        if(that.validate()){
            let params = {
                realname:regular.removeAllSpace(that.real_name),	// string	是	姓名
                idcardno:regular.removeAllSpace(that.id_card),	// string	是	身份证
                province:that.add_arr[0].name,	// string	是	省份 例如 福建省
                city:that.add_arr[1].name,	// string	是	城市 例如 福州市
                district:that.add_arr[2].name,	// string	是	地区 例如 鼓楼区
                phone:regular.removeAllSpace(that.phone),	// string	是	手机号
                bankcardNum:regular.removeAllSpace(that.card_num),	// string	是	结算卡号
                openid:that.$storage.get("openid")
            }
            return new Promise(function (resolve,reject) {
                that.$api.register(params).then(res => {
                    if(res.RCD==0){
                        that.$storage.set("logined_openid",res.openid)
                        that.$router.push({
                            path: "/Index"
                        })
                    }else{
                        that.$totast(res.ErrMsg)
                    }
                    resolve()  
                }).catch(err=>{
                    resolve() 
                })
            });
        }
    },
    // 登录验证
    validate(){
        let that = this
        if(!regular.hasContent(that.real_name)){
            that.$totast('真实姓名不能为空')
            return false   
        }
        if(regular.hasContent(that.id_card)){
            if((regular.removeAllSpace(that.id_card).length)!==18){
                that.$totast('身份证号码长度为18位')
                return false
            }
        }else{
            that.$totast('身份证号码不能为空')
            return false
        }
        if(!regular.hasContent(that.card_num)){
            that.$totast('结算银行卡不能为空')
            return false   
        }
        if(!regular.checkPhone(that.phone)){
            console.log(that.phone)
            that.$totast('手机号长度为11位')
            return false   
        }
        if(that.address==='地区信息'){
            that.$totast('地区还未选择')
            return false   
        }
        if(!regular.hasContent(that.detial_address)){
            that.$totast('详细地址不能为空')
            return false   
        }
        return true
    },
    // 确定选择
    on_confirm(arr) {
        this.hide_area_container()
        this.add_arr = arr
        this.address = `${arr[0].name} ${arr[1].name} ${arr[2].name}`
    },
    // 取消选择
    on_cancle(){
        this.hide_area_container()
    },
    // 隐藏地址选择
    hide_area_container(){
        this.show_area = false
    },
    // 显示地址选择
    show_area_container(){
        this.show_area = true
    },
    // 获取地址参数
    getQueryString(name) {
      try {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return "";
      } catch (e) {
        //TODO handle the exception
      }
    }
  }
};
</script>

<style lang="less" scoped>
.register-con {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  overflow: hidden;
  .user-info-item1 {
    padding-top: 8%;
  }
  .user-group {
    width: 100%;
    background-color: #fff;
    .user-item1 {
      width: 96%;
      float: right;
      position: relative;
      border-bottom: 1px solid #f5f5f5;
      .line-heigt(11vw);
      img{
          width: 2.5vw;
          display: block;
          position: absolute;
          right: 5vw;
          top:4vw;
      }
    }
    .ui-first-item {
      float: left;
    }
    .ui-last-item {
      width: 64vw;
      float: right;
      input {
        width: 100%;
        .line-heigt(9vw);
        border: 0;
      }
    }
  }
  .line-heigt(@height) {
    height: @height;
    line-height: @height;
  }
  .register-btn {
    margin: 0 auto;
    margin-top: 8%;
    width: 94%;
    input {
      width: 100%;
      padding: 4%;
      background: url("../assets/yellow-bg.jpg");
      color: #fff;
      border: 0;
      border-radius: 1.5vw;
      font-size: 4.2vw;
    }
  }
  /*地址设置*/
  .area-cover{
    z-index: 10;
    background-color: rgba(59, 59, 59, 0.3);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .area-content{
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 10;
  }
}
</style>
